/**
 * App.js
 * 
 * 应用程序的根组件文件
 * 负责渲染整个应用程序的主界面
 */

// 导入必要的模块和组件
import { StatusBar } from 'expo-status-bar';              // 状态栏组件
import { StyleSheet, Text, View } from 'react-native';   // React Native基础组件
import HomeScreen from './screens/HomeScreen';           // 主屏幕组件

/**
 * App 根组件
 * 应用程序的入口点，渲染主屏幕和状态栏
 * @returns {JSX.Element} 应用程序根组件
 */
export default function App() {
  return (
    // 主容器视图
    <View style={styles.container}>
      {/* 渲染主屏幕组件 */}
      <HomeScreen/>
      {/* 状态栏组件，自动适应设备状态栏 */}
      <StatusBar style="auto" />
    </View>
  );
}

/**
 * 样式定义
 * 使用StyleSheet.create创建组件样式
 */
const styles = StyleSheet.create({
  container: {
    flex: 1,                // 占据全部可用空间
    backgroundColor: '#fff', // 背景颜色为白色
    // alignItems: 'center',   // 水平居中对齐（已注释）
    // justifyContent: 'center', // 垂直居中对齐（已注释）
  },
});